<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>QQ音乐</title>
  <style>
    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a {
  text-decoration: none;
  color: #333;
}

body {
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
  color: #333;
}

header {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}


.section {
  padding: 20px;
}

.section-title {
  text-align: center;
  font-size: 24px;
  margin-bottom: 20px;
  padding-top: 50px;
}

.tabs {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.tab {
  padding: 5px 15px;
  margin: 0 5px;
  cursor: pointer;
  color: #666;
  
}

.tab.active {
  color:  #31c27c;
}

.playlist-list {
  display: flex;        
  flex-wrap: wrap;      
  justify-content: center; 
  gap: 20px;           
  background-color: #fff;
}
.mv-list{    
  justify-content: center; 
  gap: 20px;           
  background-color: #fff;
display: grid;
  grid-template-columns: repeat(5, 1fr);
 margin-bottom: 45px;
  padding-left: 120px;
  padding-right:120px ;
}



.playlist-item, .mv-item {
  background-color: #fff;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.3s ease;
}

.playlist-item:hover, .mv-item:hover {
  transform: translateY(-5px);
}

.playlist-cover {
  width: 100%;
  height: 220px;
  object-fit: cover;
  
}
 .mv-cover{
  width: 100%;
  height: 120px;
  object-fit: cover;
}


.playlist-title, .mv-title {
  font-size: 14px;
  margin: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.playlist-listen, .mv-listen {
  font-size: 12px;
  color: #999;
  margin: 0 10px 10px 10px;
}

.songlist {
   display: grid;
  gap: 0 30px;
  padding: 15px;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
   background-color: #fff;
}

.song-item {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f2f2f2;
  padding: 12px 0;
  color: #999;
}

.cover-wrap {
   display: flex;
  position: relative;
  overflow: hidden;
  width: 85px;
  margin-right: 15px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
 
}

.cover-mask {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #000;
  opacity: 0;
  transition: all 0.5s;
}

.cover-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.cover-wrap:hover .cover-mask, .cover-wrap:hover .cover-play {
  opacity: 0.5;
}

.song-intro {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-right: 45px;
  min-width: 0;
}

.song-name {
  font-size: 14px;
  margin-bottom: 5px;
  text-decoration: none;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.song-singer {
  color: #999;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.song-sep {
  margin: 0 10px;
}


.play-all {
  display: inline-block;
  padding: 6px 16px;
  background-color: #fff;
  color:  #333;
  cursor: pointer;
  border: 1px solid #ddd;
  outline: none; 
}

.container {
  display: flex;
}

.play-all:hover {
  background-color:  #f5f5f5;
}
  </style>
</head>
<body>
  <header>
   <div class="header">
      <img src="imgs/qqmusic.png">
    </div>
  </header>

  <main>
    <!-- 歌单推荐部分 -->
    <section class="playlist-section">
      <h2 class="section-title">歌单推荐</h2>
      <div class="tabs">
        <span class="tab active">为你推荐</span>
        <span class="tab">运动</span>
        <span class="tab">网络歌曲</span>
        <span class="tab">思念</span>
        <span class="tab">官方歌单</span>
        <span class="tab">情歌</span>
      </div>
      <div class="playlist-list"></div>
    </section>

    <!-- 新歌首发部分 -->
    <section class="songlist-section">
      <h2 class="section-title">新歌首发</h2>
      <div class="tabs">
         <button class="play-all"><img src="imgs/icon_play.png">&nbsp;播放全部</button>
        <span class="tab active">最新</span>
        <span class="tab">内地</span>
        <span class="tab">港台</span>
        <span class="tab">欧美</span>
        <span class="tab">韩国</span>
        <span class="tab">日本</span>
      </div>
      </div>
      <div class="songlist"></div>
    </section>

    <!-- MV部分 -->
    <section class="mv-section">
      <h2 class="section-title">MV</h2>
      <div class="tabs">
        <span class="tab active">精选</span>
        <span class="tab">内地</span>
        <span class="tab">韩国</span>
        <span class="tab">港台</span>
        <span class="tab">欧美</span>
        <span class="tab">日本</span>
      </div>
      <div class="mv-list"></div>
    </section>
  </main>

  <!-- 模板 -->
  <script type="text/template" id="playlist-tpl">
    <div class="playlist-item">
      <img src="{{cover}}" class="playlist-cover">
      <div class="playlist-title">{{title}}</div>
      <div class="playlist-listen">播放量：{{listen_num}}万</div>
    </div>
  </script>

  <script type="text/template" id="songlist-tpl">
    <div class="song-item">
      <div class="cover-wrap">
        <img src="{{cover}}" class="cover-img">
        <div class="cover-mask"></div>
        <img src="imgs/cover_play.png" class="cover-play">
      </div>
      <div class="song-intro nowrap">
        <a href="#" class="song-name">{{name}}</a>
        <div class="song-singer nowrap">{{singer}}</div>
      </div>
      <div>{{time}}</div>
    </div>
  </script>

  <script type="text/template" id="mv-tpl">
    <div class="mv-item">
      <img src="{{cover}}" class="mv-cover">
      <div class="mv-title">{{title}}</div>
      <div class="mv-listen"><img src="imgs/icon_listen.png">&nbsp;{{listen_num}}</div>
    </div>
  </script>

  <script>
    // 模拟数据（可替换为实际接口请求数据）
    const pageData = {
      "playlist": [
        {
          "title": "翻唱女神J.Fla | 只唱你最爱的旋律",
          "cover": "http://qpic.y.qq.com/music_cover/8HhavvWNIicpyjlv0UnT5TWLRxhfmGTVwYtiaWd54wZItUPRu7486Fqw/300?n=1",
          "listen_num": 891.5
        },
        {
          "title": "古风女声控，优美旋律为你而来",
          "cover": "http://qpic.y.qq.com/music_cover/GUalk7A0sBGvkxmUrXIf7KnEVGJFicuoT7xSkZLHiaEMB5Ojbccf6cbA/300?n=1",
          "listen_num": 171.2
        },
        {
          "title": "想开一家早餐店，叫“早点见面”",
          "cover": "http://qpic.y.qq.com/music_cover/QrmdXDG3R4jGSEzqu0qtR4vw6Glga0N83eKicVCib61BZw5lZtWEUMibQ/300?n=1",
          "listen_num": 52.5
        },
        {
          "title": "好评999+英文歌！轻松解压100％",
          "cover": "http://qpic.y.qq.com/music_cover/R8unPZMA4Vp5v2Ms96bst9nFCfe4YPBFBADicMz2LB0kLfEiaUM4ymiag/300?n=1",
          "listen_num": 12391.0
        },
        {
          "title": "书房背景乐 沉浸于字里行间的时光",
          "cover": "http://qpic.y.qq.com/music_cover/IknB7UUG0ME0zalRpPKYjJiauia2kJzKs5gtKQY4Vq9TJYLXdjQK9fCA/300?n=1",
          "listen_num": 303.3
        }
      ],
      "songlist": [
        {
          "name": "Sabotage",
          "singer": ["Bebe Rexha"],
          "interval": 176,
          "cover": "https://y.gtimg.cn/music/photo_new/T002R90x90M000002myPA84G7kxG_1.jpg"
        },
        {
          "name": "如果人人爱音乐",
          "singer": ["张蔷"],
          "interval": 226,
          "cover": "https://y.gtimg.cn/music/photo_new/T002R90x90M000003UIhdS4fBLqU_1.jpg"
        },
        {
          "name": "你就不要想起我",
          "singer": ["R1SE赵磊"],
          "interval": 270,
          "cover": "https://y.gtimg.cn/music/photo_new/T002R90x90M000002v6ztM40D0iP_1.jpg"
        },
        {
          "name": "软肋",
          "singer": ["李宇春"],
          "interval": 257,
          "cover": "https://y.gtimg.cn/music/photo_new/T002R90x90M0000005wEOc07Udwu_1.jpg"
        },
        {
          "name": "一爱如故《长歌行》电视剧插曲",
          "singer": ["摩登兄弟刘宇宁"],
          "interval": 235,
          "cover": "https://y.gtimg.cn/music/photo_new/T002R90x90M000003vGVIq243Mzm_2.jpg"
        },
        {
          "name": "向宿命挥拳的人《新斗罗大陆》手游戴沐白角色曲",
          "singer": ["阿云嘎"],
          "interval": 240,
          "cover": "https://y.gtimg.cn/music/photo_new/T002R90x90M000000hNAwr4dbutH_1.jpg"
        },
        {
          "name": "花好月圆",
          "singer": ["周迅"],
          "interval": 154,
          "cover": "https://y.gtimg.cn/music/photo_new/T002R90x90M000000dcpok0A8RP3_2.jpg"
        },
        {
          "name": "Renegades",
          "singer": ["ONE OK ROCK"],
          "interval": 244,
          "cover": "https://y.gtimg.cn/music/photo_new/T002R90x90M000004X1Kbg34UHQ5_1.jpg"
        },
        {
          "name": "驯化者",
          "singer": ["陈俊豪", "陈誉庚", "TGM-姜京佐", "刘冠佑", "罗一舟", "唐九洲", "G.G张思源"],
          "interval": 208,
          "cover": "https://y.gtimg.cn/music/photo_new/T002R90x90M0000018mpfj0lSvS0_1.jpg"
        }
      ],
      "mvlist": [
        {
          "title": "向宿命挥拳的人 (《新斗罗大陆》手游戴沐白角色曲)",
          "singer": "阿云嘎",
          "listen_num": "9370",
          "cover": "https://y.gtimg.cn/music/photo_new/T015R640x360M102000SY7kU0vIuoT.jpg"
        },
        {
          "title": "雨",
          "singer": "Sunnee杨芸晴",
          "listen_num": "3585",
          "cover": "https://y.gtimg.cn/music/photo_new/T015R640x360M000003vHDbe24Jqpl.jpg"
        },
        {
          "title": "一爱如故 (《长歌行》电视剧插曲)",
          "singer": "摩登兄弟刘宇宁",
          "listen_num": "43495",
          "cover": "https://y.gtimg.cn/music/photo_new/T015R640x360M1010047OlaH3P3f0J.jpg"
        },
        {
          "title": "我很好骗",
          "singer": "动力火车",
          "listen_num": "11301",
          "cover": "https://y.gtimg.cn/music/photo_new/T015R640x360M101002cYg662xvSlL.jpg"
        },
        {
          "title": "造梦时学会飞行 (《声梦传奇》主题曲)",
          "singer": "TVB",
          "listen_num": "1539",
          "cover": "https://y.gtimg.cn/music/photo_new/T015R640x360M101001YVtJL2sr2Z7.jpg"
        },
        {
          "title": "What's Wrong With Me (Punk Version)",
          "singer": "Lil Ghost小鬼",
          "listen_num": "206872",
          "cover": "https://y.gtimg.cn/music/photo_new/T015R640x360M101003RlAau1dFne3.jpg"
        },
        {
          "title": "Let's Party (《和平精英》2周年庆派对邀请曲)",
          "singer": "吴宣仪",
          "listen_num": "67024",
          "cover": "https://y.gtimg.cn/music/photo_new/T015R640x360M102003c3tSe1ehWwN.jpg"
        },
        {
          "title": "鋼の羽根",
          "singer": "RADWIMPS",
          "listen_num": "2927",
          "cover": "https://y.gtimg.cn/music/photo_new/T015R640x360M0000013X2t31kvJC4.jpg"
        },
        {
          "title": "에필로그 (epilogue)",
          "singer": "IU",
          "listen_num": "8197",
          "cover": "https://y.gtimg.cn/music/photo_new/T015R640x360M101003aYDEH2kWTX7.jpg"
        },
        {
          "title": "圭贤《Coffee》MV",
          "singer": "圭贤",
          "listen_num": "15163",
          "cover": "https://y.gtimg.cn/music/photo_new/T015R640x360M101000xHMCS1g3sSW.jpg"
        }
      ]
    };

    // 时间格式化函数
    function timeFormat(interval) {
      let minutes = Math.floor(interval / 60).toString().padStart(2, '0');
      let seconds = (interval % 60).toString().padStart(2, '0');
      return `${minutes}:${seconds}`;
    }

    // 渲染歌单
    function renderPlaylist() {
      const tpl = document.getElementById('playlist-tpl').innerHTML;
      const html = pageData.playlist.map(playlist => {
        let result = tpl.replace('{{title}}', playlist.title)
                        .replace('{{listen_num}}', playlist.listen_num)
                        .replace('{{cover}}', playlist.cover);
        return result;
      }).join('');
      document.querySelector('.playlist-list').innerHTML = html;
    }

    // 渲染歌曲
    function renderSonglist() {
      const tpl = document.getElementById('songlist-tpl').innerHTML;
      const html = pageData.songlist.map(song => {
        let time = timeFormat(song.interval);
        let singer = song.singer.map(item => `<a href="#" class="song-singer">${item}</a>`)
                              .join('<span class="song-sep">/</span>');
        let result = tpl.replace('{{name}}', song.name)
                        .replace('{{singer}}', singer)
                        .replace('{{time}}', time)
                        .replace('{{cover}}', song.cover);
        return result;
      }).join('');
      document.querySelector('.songlist').innerHTML = html;
    }

    // 渲染MV
    function renderMV() {
      const tpl = document.getElementById('mv-tpl').innerHTML;
      const html = pageData.mvlist.map(mv => {
        let result = tpl.replace('{{title}}', mv.title)
                        .replace('{{listen_num}}', mv.listen_num)
                        .replace('{{cover}}', mv.cover);
        return result;
      }).join('');
      document.querySelector('.mv-list').innerHTML = html;
    }

    // 页面加载完成后执行渲染
    window.addEventListener('DOMContentLoaded', () => {
      renderPlaylist();
      renderSonglist();
      renderMV();
    });
  </script>
</body>
</html>